{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">学历分析可视化</h1>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title">学历分布饼图</h5>
        <p class="card-text">展示各学历要求的占比分布</p>
        <img src="data:image/png;base64,{{ piechart_url }}" class="img-fluid" alt="学历分布饼图">
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title mb-0"><i class="fas fa-chart-bar me-2"></i>各行业学历要求堆叠柱状图</h5>
        <p class="card-text">对比不同行业对学历的要求差异</p>
        <img src="data:image/png;base64,{{ barchart_url }}" class="img-fluid" alt="行业学历要求堆叠柱状图">
    </div>
</div>
{% endblock %}